<template>
    <div>
        <h2>首页</h2>
        <el-row :nerver="true" style="margin-bottom: 15px;">
            <el-col :span="24">
                <el-card shadow="never">
                    <VueEcharts style="width: 100%; height: 300px;" :option="ordersOption"></VueEcharts>
                </el-card>
            </el-col>
        </el-row>



        <el-row :gutter="15">
            <el-col :span="12">
                <el-card shadow="nerver">
                    <VueEcharts style="width: 500px; height: 300px;" :option="usersOption"></VueEcharts>
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card>
                    <VueEcharts style="width: 100%; height: 300px;" :option="hasBuyOption"></VueEcharts>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script setup lang="ts">
import api from '@/api';
import { onMounted, ref, computed } from 'vue';
const usersData = ref({
    count: [],
    date: []
})

// 用户数据
const usersOption = computed(() => {
    return {
        xAxis: {
            type: 'category',
            data: usersData.value.date
        },
        yAxis: {
            type: 'value',
            name: "用户"
        },
        series: [
            {
                data: usersData.value.count,
                type: 'line',
                smooth: true,
                // 去掉线条上的小圆点
                symbol: "none",
                // 给曲线图下方添加背景颜色
                areaStyle: {
                    color: "#1abc76",
                },
                lineStyle: {
                    color: "skyblue",
                },
            }
        ]
    }
})


onMounted(() => {
    getHomeData()
    getOrdersEchartsData()
    getHasBuyEchartsData()
})
// 订单数据
const ordersData = ref({
    date: [],
    orderCount: [],
    orderMoney: []
})
const hsaBuyData = ref([])
// console.log(ordersData.value, 22);
const getHomeData = async () => {
    const res = await api.homeCount.search()
    if (res.code == 200) {
        usersData.value.count = res.data.count
        usersData.value.date = res.data.data
    }
}
const ordersOption = computed(() => {
    return {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                crossStyle: {
                    color: "#999",
                },
            },
        },
        grid: {
            left: 30,
            right: 35,
            bottom: 30,
        },
        legend: {
            data: ["订单数量", "订单金额"],
        },
        xAxis: [
            {
                type: "category",
                axisLabel: { interval: 0, rotate: 30 },
                data: ordersData.value.date,
                axisPointer: {
                    type: "shadow",
                },
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "数量",
                // min: 0,
                // max: 250,
                // interval: 50,
                // axisLabel: {
                //     formatter: '{value}'
                // }
            },
            {
                type: "value",
                name: "金额",
                // min: 0,
                // max: 25,
                // interval: 5,
                // axisLabel: {
                //     formatter: '{value} °C'
                // }
            },
        ],
        series: [
            {
                name: "订单数量",
                type: "bar",
                tooltip: {
                    valueFormatter: function (value: string) {
                        return value + " ml";
                    },
                },
                data: ordersData.value.orderCount,
            },
            {
                name: "订单金额",
                type: "line",
                // smooth: true, // 折线变曲线
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value: string) {
                        return value + " °C";
                    },
                },
                data: ordersData.value.orderMoney,
            },
        ],
    };
})
const getOrdersEchartsData = () => {
    api.homeCount.seachOrder({
        cycle: 'thirtyday'
    })
        .then(res => {
            if (res.code == 200) {
                // console.log(res.data, 11);
                ordersData.value = res.data;
            }
        })
}

const getHasBuyEchartsData = async () => {
    const res = await api.homeCount.seachBuy()
    if (res.code == 200) {
        hsaBuyData.value = res.data.map((item: any) => {
            return { value: item.count, name: item.title }
        })
    }
}
const aa = computed(() => {
    return hsaBuyData.value.map((item: any) => {
        return { value: item.count, name: item.title }
    })
})
const hasBuyOption = computed(
    () => {
        return {
            title: {
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
              
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '68%',
                    center: ['50%', '50%'],
                    data: hsaBuyData.value,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
    }
)
</script>

<style scoped></style>